<template>
  <div class="PersonList">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left" @click="$router.go(-1)">
          <span class="iconfont icon-xiangzuo1"></span>
          <div class="title">{{ PageTitle }}</div>
        </div>
      </template>
    </top-title-bar>
    <div class="wrap">
      <van-tabs
        v-model="active"
        offset-top="50px"
        sticky
        swipeable
        color="#0cc85c"
        title-active-color="#14ca61"
        title-inactive-color="#666666"
        @rendered="PersonListDataInit"
        @change="changeFun"
        line-width="50px"
      >
        <van-tab title="关注Ta">
          <div class="wrap" v-if="FriendList">
            <main class="focus-ta">
              <div
                :class="['user', { con: item.friendship == 2 }]"
                v-for="item in FriendList"
                :key="item.user.userID"
                @click="$router.push('/UserInfos?user_id=' + item.user.userID)"
              >
                <!-- - 图片 -->
                <div class="icon"><img :src="item.user.avatar" alt="" /></div>

                <div class="text">
                  <div class="name">{{ item.user.nick }}</div>
                  <div :class="['age', { woman: item.user.gender == 1 }]">
                    <span
                      :class="[
                        'iconfont',
                        item.user.gender == 1 ? 'icon-nv' : 'icon-nan',
                      ]"
                      >{{ item.user.age }}</span
                    >
                  </div>
                </div>

                <p @click.stop="unFocusFun(item.user.userID)">
                  {{ item.friendship == 2 ? "互相关注" : "已关注" }}
                </p>
              </div>
            </main>
            <van-empty
              v-show="!FriendList.length"
              class="custom-image"
              image="./img/empty.png"
              description="去其他地方看看吧!"
            />
          </div>
        </van-tab>
        <van-tab title="关注Wo">
          <div class="wrap" v-if="FansList">
            <main>
              <div
                :class="['user', { con: item.friendship == 2 }]"
                v-for="item in FansList"
                :key="item.user.userID"
                @click="$router.push('/UserInfos?user_id=' + item.user.userID)"
              >
                <!-- - 图片 -->
                <div class="icon"><img :src="item.user.avatar" alt="" /></div>

                <div class="text">
                  <div class="name">{{ item.user.nick }}</div>
                  <div :class="['age', { woman: item.user.gender == 1 }]">
                    <span
                      :class="[
                        'iconfont',
                        item.user.gender == 1 ? 'icon-nv' : 'icon-nan',
                      ]"
                      >{{ item.user.age }}</span
                    >
                  </div>
                </div>
              </div>
            </main>
            <van-empty
              v-show="!FansList.length"
              class="custom-image"
              image="./img/empty4.png"
              description="去其他地方看看吧!"
            />
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
  
<script>
import { getFriendListData, getFansListData } from "../assets/api/space.js";
import TopTitleBar from "../components/TopTitleBar.vue";
export default {
  data() {
    return {
      PageTitle: "关注Ta",
      active: 0, //标签按钮下标
      FriendList: null, //我的关注数据
      FansList: null, //关注我的数据
    };
  },
  methods: {
    // 数据初始化
    dataInit() {
      this.activeInit();
    },

    // 取关
    unFocusFun(userID) {
      let data = JSON.parse(localStorage.getItem("personList"));
      if (!data) {
        data = {
          FriendList: {
            unFocus: [],
            Focus: [],
          },
          FansList: [],
        };
      }
      // 去重
      data.FriendList.unFocus = data.FriendList.unFocus.filter(
        (val) => val != userID
      );
      // 往取关中添加
      data.FriendList.unFocus.push(userID);
      // 往关注中过滤
      data.FriendList.Focus = data.FriendList.Focus.filter(
        (item) => item.user.userID != userID
      );
      localStorage.setItem("personList", JSON.stringify(data));
      console.log("已经取关 更新界面 userID data", userID, data);
      // 更新界面
      this.PersonListDataInit();
    },

    // 查看是否本地有更新
    localDataInit() {
      let data = JSON.parse(localStorage.getItem("personList"));
      if (data) {
        if (this.active == 0) {
          // 遍历过滤出没取关的用户
          data.FriendList.unFocus.forEach((userID) => {
            this.FriendList = this.FriendList.filter(
              (item) => item.user.userID != userID
            );
          });
          // 后面添加已经已经关注的
          data.FriendList.Focus.forEach((item) => {
            if (!this.FriendList.some((o) => o.user.userID == item.user.userID))
              this.FriendList.push(JSON.parse(JSON.stringify(item)));
          });
        } else if (this.active == 1) {
          true;
        }
      } else console.log("无更新");
    },

    // 标签转态改变事件 改变顶部文字内容
    changeFun(name, title) {
      this.PageTitle = title;
      if (
        (this.active == 0 && !this.FriendList) ||
        (this.active == 1 && !this.FansList)
      )
        this.PersonListDataInit();
    },

    // 下标初始化
    activeInit() {
      if ("active" in this.$route.query)
        this.active = parseInt(this.$route.query.active);
    },

    // 消息数据初始化
    async PersonListDataInit() {
      // 在请求时
      this.$store.commit("showLoading");
      if (this.active == 0) {
        let start = 0;
        let count = 20;
        let user_id;

        // 取到路由传参的参数
        if ("user_id" in this.$route.query) user_id = this.$route.query.user_id;
        else user_id = 20096544;

        console.log("取到传递的参数", user_id);

        let FriendList = await getFriendListData({ user_id, start, count });
        this.FriendList = FriendList.friendships;
        this.localDataInit();
        this.$toast.success("拉取成功");
        console.log(this.FriendList);
      } else if (this.active == 1) {
        let start = 0;
        let count = 20;
        let user_id;

        // 取到路由传参的参数
        if ("user_id" in this.$route.query) user_id = this.$route.query.user_id;
        else user_id = 20096544;

        console.log("取到传递的参数", user_id);

        let FansList = await getFansListData({ user_id, start, count });
        this.FansList = FansList.friendships;
        this.localDataInit();
        this.$toast.success("拉取成功");
        console.log(this.FansList);
      }
      // 请求完成后
      this.$store.commit("hideLoading");
    },
  },
  created() {
    this.dataInit();
  },
  components: {
    TopTitleBar,
  },
  filters: {
    // 把数字转成年月日
    numToYMD(val) {
      let y = new Date(val).getFullYear() - 2000 + "年";
      let m = new Date(val).getMonth() + 1 + "月";
      let d = new Date(val).getDate() + "日";
      return y + m + d;
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.PersonList {
  min-height: 100%;
  background-color: #fff;
  .TopTitleBar {
    .left {
      display: flex;
      align-items: center;
      .icon-xiangzuo1 {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
    }
    .right {
      .icon-xiaoxi,
      .icon-bianji1 {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
        &.icon-xiaoxi {
          margin-left: 18px;
        }
      }
    }
  }
  main {
    margin-top: 0;
    .user {
      height: 70px;
      border-bottom: 1px solid #eaeaea;
      box-sizing: border-box;
      display: flex;
      padding: 12px;
      .icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        overflow: hidden;
      }
      .text {
        flex: 1;
        margin: 0 10px;
      }
      .name {
        height: 25px;
        line-height: 25px;
        font-size: 15px;
        margin-bottom: 2px;
        color: #343434;
      }
      .age {
        background-color: #1dc8f0;
        height: 16px;
        line-height: 16px;
        border-radius: 3px;
        width: max-content;
        color: #fff;
        padding: 0 4px;
        span {
          display: inline-block;
          transform: scale(0.7);
          margin-left: -4px;
        }
        &::before {
          content: "";
          display: inline-block;
          background-size: 10px 81px;
          width: 10px;
          height: 11px;
        }
      }
      p {
        display: block;
        width: 65px;
        height: 25px;
        box-sizing: border-box;
        border: 1px solid #bdbdbd;
        color: #bdbdbd;
        font-size: 12px;
        text-align: center;
        line-height: 25px;
        border-radius: 5px;
        align-self: center;
      }
      &.con {
        p {
          border-color: #0cc85c;
          color: #0cc85c;
        }
      }
      &.woman {
        .age {
          background-color: #f452a2;
          &::before {
            background-size: 10px 81px;
            width: 8px;
            height: 11px;
          }
        }
      }
    }
  }

  .wrap {
    padding-top: 0;
    main {
      .user {
        &:active {
          box-shadow: 0 0 50px 0 inset rgba($color: #000000, $alpha: 0.1);
          opacity: 0.9;
        }
        .age {
          &.woman {
            background-color: #f452a2;
          }

          &::before {
            content: none;
          }

          .iconfont {
            &::before {
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
  .van-empty__image {
    height: unset;
    img {
      height: auto;
    }
  }
}
</style>